<!-- 孩子请假信息 -->
<template>
  <el-card>
    <template #header>
      <div>
        <span>请假列表</span>
      </div>
    </template>

    <!-- 搜索表单 -->
    <el-form class="w-[25rem]">
      <el-form-item label="发布状态：">
        <el-select placeholder="请选择" v-model="queryParams.type" clearable>
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="已审核" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 请假表格 -->
    <el-table :data="leaveList">
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="reason" label="请假原因" align="center" />
      <el-table-column prop="status" label="审核状态" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status == 0" type="warning">未审核</el-tag>
          <el-tag v-if="row.status == 1" type="success">已审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link plain type="success" @click="lookLeaveInfo(row)">查看</el-button>
          <el-button link plain type="success" v-if="row.status == 0" @click="updateYes(row)"
            >同意</el-button
          >
          <el-button link plain type="danger" v-if="row.status == 0" @click="deleteLeaveInfo(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
  </el-card>

  <lookLeaaveInfo ref="lookLeaaveInfoRef" @getInfo="getList"></lookLeaaveInfo>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { getLeaveList, updateLeaveStatus, deleteLeave } from "@/api/requestLeave";
import lookLeaaveInfo from "@/views/family/component/lookLeaaveInfo.vue";
import message from "@/composable/ElMessage";

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  type: 0,
});

const leaveList = ref<any[]>([]);
const getList = async () => {
  leaveList.value = [];
  const res = await getLeaveList(queryParams.type);
  leaveList.value = res.data.reverse();
};

watch(
  () => queryParams.type,
  () => {
    getList();
  }
);

const lookLeaaveInfoRef = ref();
const lookLeaveInfo = (row: any) => {
  lookLeaaveInfoRef.value.open(row);
};

const updateYes = (row: any) => {
  const data = {
    id: row.id,
    status: 1,
  };
  updateLeaveStatus(data).then((res: any) => {
    if (res.code == 200) {
      message.success("已同意");
    }
    getList();
  });
};
const deleteLeaveInfo = (row: any) => {
  deleteLeave(row.id).then((res: any) => {
    if (res.code == 200) {
      message.success("删除成功");
      getList();
    }
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>
